<template>
	<!-- 背景墙 + 用户基本信息 -->
	<view class="user-space-head u-f-ajc">
		<image :src="getBgImg" mode="widthFix" lazy-load @tap.stop='changeBgImg'></image>
		<view class="user-space-head-info u-f-ajc u-f-colum">
			<image :src="userinfo.avatar" mode="widthFix" lazy-load></image>
			<view class="u-f-ajc user-space-margin">
				{{userinfo.nickname}}
				<tag-sex-age :sex="userinfo.sex" :age="userinfo.age"></tag-sex-age>
			</view>
			<view 
			class="icon iconfont user-space-head-btn" 
			:class="isfollow ? 'active' : 'icon-zengjia1'"
			@tap.stop='follow'>
				{{isfollow ? '已关注' : '关注'}}
			</view>
		</view>
	</view>
</template>

<script>
	import tagSexAge from '../../components/common/tag-sex-age.vue';
	export default {
		components:{
			tagSexAge
		},
		props:{
			userinfo: Object
		},
		data() {
			return {
				isfollow: this.userinfo.isfollow,
			}
		},
		computed:{
			getBgImg(){
				return '../../static/images/bgimage/' + this.userinfo.bgpic + '.jpg'
			}
		},
		methods: {
			follow(){
				this.isfollow = !this.isfollow;
			},
			changeBgImg(){
				let num = parseInt(this.userinfo.bgpic);
				this.userinfo.bgpic = num < 5 ? ++num : 1;
			}
		}
	}
</script>

<style scoped>
	.user-space-head{
		position: relative;
	}
	.user-space-head image{
		width: 100%;
		height: 500upx;
		overflow: hidden;
	}
	.user-space-head-info{
		position: absolute;
		top: 120upx;
	}
	.user-space-head-info image{
		width: 150upx;
		height: 150upx;
		border-radius: 100%;
	}
	.user-space-head-info>view:first-of-type{
		color: #FFFFFF;
		font-size: 35upx;
		font-weight: bold;
		text-shadow: 2upx 2upx 10upx #333333;
	}
	.user-space-head-btn{
		background: #FFE933;
		color: #333333;
		border: 1upx solid #FFE933;
		padding: 0 15upx;
		border-radius: 10upx;
		font-size: 28upx;
	}
	.active{
		background: none;
		color: #FFFFFF;
		border: 1upx solid #FFFFFF;
	}
</style>
